<template>
	<div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
		class="viewContainer">
		<div style="display: grid;justify-content: center;font-weight: 800;" v-if="viewData['current']">现有配置</div>
		<div style="display: grid;justify-content: center;font-weight: 800;" v-if="viewData['saved']">已保存配置</div>
		<div style="padding-bottom: 15px">
			<p v-for="(item, index) in viewData['current']"
				:class="{Different:!ComparisonResult[index],same:ComparisonResult[index]}" :key="index">{{ item }}</p>
		</div>
		<div style="padding-bottom: 15px">
			<p v-for="(item, index) in viewData['saved']"
				:class="{Different:!ComparisonResult[index],same:ComparisonResult[index]}" :key="index">{{ item }}</p>
		</div>

	</div>
</template>

<script>
	import {
		getJavaServerData
	} from "@/api/index.js";
	import {
		serverip2
	} from "@/api/serverIP.js";
	import request from "@/utils/request";
	import bus from "common/bus.js";
	export default {
		data() {
			return {
				viewData: {},
				timerName: "MonitorInfoNetworkVersion",
				timerEventName: "timerMonitorInfoNetworkVersion",
				selectedMonID: "",
				loading: false,
				ComparisonResult: []
			};
		},
		created() {
			this.selectedMonID = this.$store.getters["ItemMonitorServer/getItem"];
			// this.getInfo();

			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});

			bus.$on(this.timerEventName, (msg) => {
				console.log("8080",msg)
				if (msg.isGetData) {
					this.getInfo();
				}
			});
		},
		mounted() {
			bus.$on("ItemMonitorServer", (msg) => {
				console.log("80802",msg)
				this.resetData();
				this.selectedMonID = msg;
				this.getInfo();
			});
		},
		methods: {
			getInfo() {
				console.log(":getinfo")
				this.loading = true;
				getJavaServerData("/Sp/networkconfiguration", {
						hid: this.selectedMonID.MONID,
					})
			 	.then((_) => {
						console.log(123,_)
						this.viewData = _;
						this.Comparison(_);
					})
					.finally((_) => {
						this.loading = false;
					});
			},
			Comparison(data) {
				let len = data['current'].length > data['saved'].length ? data['current'].length : data['saved'].length;
				for (let i = 0; i < len; i++) {
					if (data['current'][i] && data['saved'][i]) {
						this.ComparisonResult[i] = data['current'][i].trim() === data['saved'][i].trim()
					} else {
						this.ComparisonResult[i] = false
					}

				}

			},
			verification() {
				let status = new Set(this.ComparisonResult);
				if (status.has(false)) {
					this.$message.error('现有配置与保存配置不一致,请权衡是否进行手动保存操作')
				} else {
					if (this.viewData['current'].length == 0 || this.viewData['saved'].length == 0) {
						this.$message.warning('数据缺失无法进行比对')
					} else {
						this.$message.success('现有配置与保存配置一致')
					}
				}
			},
			resetData() {
				this.viewData = "";
			},
		},
		beforeDestroy() {
			// 页面关闭前，移除定时器任务
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
		},
	};
</script>

<style lang="scss" scoped>
	.viewContainer {
		padding: 15px;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 5px;
		// min-height: 300px;
		// max-height:80vh;
		height:calc(100% - 25px);
		
		overflow-y: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 10px;
	}

	.viewContainer::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	.viewContainer::-webkit-scrollbar-thumb {
		background-color: #E0E0E0;
		border-radius: 3px;
	}

	.Different {
		color: #dc3545;
	}

	.same {
		color: #28a745;
	}
</style>